<template>
  <div>
    <h4>缴费详细</h4>
<!--    检索部分-->
    <div class="search">
      <CommonForm
        :form="searchForm"
        :formLabel="searchLabel"
        :formConfig="searchConfig"
      >
        <el-button type="primary" icon="el-icon-search" class="float-btn" @click="searchCommit(searchForm)">检索</el-button>
      </CommonForm>
    </div>
<!--    表格部分-->
    <div>
      <CommonTable style="height:auto;"
        v-if="isShowTable"
        v-loading = "loading"  element-loading-text="拼命加载中"
        :table-data="tableData"
        :table-label="tableLabel"
        :table-config="tableConfig"
        @sizeChange="getTableData(1, tableConfig.size, {})"
        @currentPage="getTableData(tableConfig.page, tableConfig.size, {})"
      >

      </CommonTable>
<!--      数据为空不做渲染-->
      <el-empty v-else></el-empty>
    </div>
  </div>
</template>

<script>
//引入表单和表格组件
import CommonForm from "@/components/common/CommonForm";
import CommonTable from "@/components/common/CommonTable";
import {getElectricityPay} from '@/api/electricity/payDetail';
import schoolManage from "@/views/schoolManage/schoolManage";
export default {
  mounted() {
    this.getTableData(1,10,{});
  },
  data(){
    return {
      /* -----------检索部分----------*/
      //检索的表单
      searchForm: {
        campusName: "",//学校或者校区
        buildingID: "",//楼栋
        roomName: "",//房间
        isPay: ""//是否缴费
      },
      //检索表单
      searchLabel: [
        {
          model: "schoolCampus",
          type: 'campusCascader',
          label: "学校/校区",
          labelWidth: '85px',
          //可以跨级选择
          props: {checkStrictly: true},
        },
        {
          model: 'buildingID',
          label: '楼栋',
          type: 'buildingSelect',
        },
        {
          model: 'roomName',
          label: '房间',
        },
        {
          labelWidth: '85px',
          model: 'isPay',
          label: '缴费情况',
          type: 'select',
          options: [
            {label: '全部', value: 2},
            {label: '未缴费', value: 0},
            {label: "已缴费", value: 1}
          ]
        }
      ],

      //表单配置
      searchConfig: {
        labelWidth: "40px",
        inline: true,
        labelPosition: "left",
      },
      /* -----------表格部分----------*/

      loading: true,//表格载入
      isShowTable:false,//判断渲染
      //表格数据
      tableData: [{

      }],
      //表格标签
      tableLabel:[
        {
          prop:"schoolName",
          label:"学校名称"
        },
        {
          prop: "campusName",
          label: "校区名称"
        },
        {
          prop: "buildingName",
          label: "楼栋名称"
        },
        {
          prop: "roomNumber",
          label: "房间号"
        },
        {
          prop: "equipmentStatus",
          type:'equipmentState',
          label: "设备状态"
        },
        {
          prop: "electricityOTM",
          label: "月用电数(度)"
        },
        {
          prop: "payed",
          label: "缴费状态",
          type: 'dualJudgment',
          trueType:'已缴费',
          falseType:'未缴费'
        },
        {
          prop: "payTime",
          label: "缴费时间"
        },
        {
          prop: "payEmail",
          label: "缴费账号"
        },
        {
          prop: "appUserBalance",
          type:'money',
          label: "余额"
        }
      ],
      //表格配置
      tableConfig:{
        isShowLoading:true,
        //当前页
        page:1,
        //总页数
        total:30,
        //单页条目
        size:10,
        //加载区块
        loading:false
      }
    }
  },
  methods:{
     getTableData(page,pageSize,datas){
       getElectricityPay(page,pageSize,datas).then(res=>{
        const  resultData = res.data;
        if (resultData.code == 200){
          this.loading = false;
          this.isShowTable = true;
          //处理数据整体
          this.tableData = resultData.data.records;
          //获取数据长度
          const dataList = this.tableData.length;
          if (dataList<0){this.isShowTable=false}
          this.tableConfig.total = resultData.data.total;
          this.$notify({
            message:dataList<0? '未从服务器搜索到相关数据':`成功获取 ${dataList} 条数据`,
            type:'success'
          });
        }
        else {
          //返回错误信息
          return this.$notify.error(resultData.message);
        }
      }).catch(()=>{
        //请求失败
        this.$message.error('无法从远程服务获取数据');
      })
    },
    searchCommit(searchForm){
      const Data = {};
      if ('schoolCampus'in searchForm){
        let [schoolName,campusId] =searchForm.schoolCampus||[];
        Data.campusId = campusId?campusId:'';
        Data.schoolName = schoolName;
      }
      for (let i in searchForm) {
        //排除空元素；
        if (searchForm[i] !== "") {
          if (i==='schoolCampus'){continue;}
          Data[i] = searchForm[i];
        }
      }
      if (Object.keys(Data).length===0){
        return this.$notify.error('查询参数为空');
      }

        this.getTableData(1,10,Data);

    }
  },
  //注册组件
  components: {CommonTable, CommonForm}


}
</script>

<style >

</style>

